<template>
	<view class="com-chat-input" @touchmove.stop.prevent>
		<view class="com-chat-input__content">
			<view class="com-chat-input__content-grid">
				<view class="img " @tap="sendImage('album')">
					<u-image width="48rpx" height="48rpx"
						src="https://file.casugn.com/storecompcard/static/img/picture_1681376258955.png"></u-image>
				</view>
				<view class="img" @tap="sendImage('camera')">
					<u-image width="48rpx" height="48rpx"
						src="https://file.casugn.com/storecompcard/static/img/camera_1681376245762.png"></u-image>
				</view>
			</view>
			<view class="com-chat-input__content-input">
				<textarea v-model="textMsg" :auto-height="true" :show-confirm-bar="false" :confirm-hold="true"
					:adjust-position="false" confirmType="send" @input="textareaInput" @confirm.prevent="sendText"
					@keyboardheightchange="keyboardheightchange" />
			</view>
			<view class="com-chat-input__content-send">
				<u-button color="#276AEE" throttleTime="500" :customStyle="{height: '64rpx',padding: '0 32rpx'}"
					@touchend.prevent="sendText">发送</u-button>
			</view>
		</view>
		<view class="placeholder" :style="{height:(keyboardHeight||safeAreaInsetsBottom)+'px'}"></view>
	</view>
</template>

<script>
	import baseConfig from '@/config/baseUrl.js';
	export default {
		data() {
			return {
				safeAreaInsetsBottom: uni.getSystemInfoSync().safeAreaInsets.bottom,
				keyboardHeight: 0,
				textMsg: '',
			}
		},
		methods: {
			sendHandle(format, content) {
				if (!content) {
					return
				}
				this.$emit('send', { format, content })
			},
			textareaInput(e) {
				this.$emit('input', e.detail.value)
			},
			sendText() {
				this.sendHandle(0, this.textMsg)
				this.textMsg = ''
			},
			//选照片 or 拍照
			sendImage(type) {
				const that = this
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						console.log(res);
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const result = await that.uploadFilePromise(res.tempFilePaths[i])
							that.sendHandle(2, result)
						}
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.success) {
								resolve(data.message)
							}
						}
					});
				})
			},
			keyboardheightchange(e) {
				this.keyboardHeight = e.detail.height
				this.$emit('keyboardheightchange', e.detail.height)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-chat-input {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		background-color: #fff;

		.com-chat-input__content {
			padding: 14rpx 32rpx;
			box-sizing: border-box;

			display: flex;
			align-items: center;

			.com-chat-input__content-grid {
				margin-right: 16rpx;
				flex: 0 0 auto;

				display: flex;
				align-items: center;

				.img+.img {
					margin-left: 16rpx !important;
				}
			}

			.com-chat-input__content-input {
				width: 100%;
				min-height: 66rpx;
				padding: 0 20rpx;
				background-color: #F2F3F5;

				display: flex;
				align-items: center;

				textarea {
					width: 100%;
					max-height: 238rpx;
					line-height: 34rpx;
					box-sizing: border-box;
				}
			}

			::v-deep.com-chat-input__content-send {
				margin-left: 16rpx;
				flex: 0 0 auto;
			}
		}

		.placeholder {
			box-sizing: border-box;
			transition: height .25s;
		}
	}
</style>
